   mensesChartHeightPercentage = 0.7;   

   function firstShowMensesChartDetail(){
   		initMensesChartDetailZone();
   		showMensesChartDetail();
   }
   
   function initMensesChartDetailZone(){
   		window.onload = initMensesChartDetailStyle();
   }
   
   function initMensesChartDetailStyle(){
		var mensesChartDetailHeight = window.innerHeight * (1 - mensesChartHeightPercentage);
		var mensesChartDetailWidth = window.innerWidth;		
		
		/*设置主体显示div高度*/
		document.getElementById("detail_table").style.width = mensesChartDetailWidth + 'px';
		document.getElementById("detail_table").style.height = mensesChartDetailHeight + 'px';
		document.getElementById("periodDayNum_td").style.width = (mensesChartDetailWidth - mensesChartDetailHeight) / 2 + 'px';
		document.getElementById("periodDayNum_td").style.height = mensesChartDetailHeight + 'px';
		document.getElementById("periodDayTitle_td").style.width = (mensesChartDetailWidth - mensesChartDetailHeight) / 2 + 'px';
		document.getElementById("periodDayTitle_td").style.height = mensesChartDetailHeight + 'px';
		document.getElementById("detail_td").style.width = mensesChartDetailHeight + 'px';
		document.getElementById("detail_td").style.height = mensesChartDetailHeight + 'px';
		document.getElementById("detail_td").style.borderRadius = mensesChartDetailHeight / 2 + 'px';
		
		document.getElementById("heart").style.width = mensesChartDetailHeight / 10 + 'px';
		document.getElementById("moon").style.width = mensesChartDetailHeight / 10 + 'px';
		document.getElementById("drink").style.width = mensesChartDetailHeight / 10 + 'px';
		document.getElementById("medicine").style.width = mensesChartDetailHeight / 10 + 'px';
		document.getElementById("plane").style.width = mensesChartDetailHeight / 10 + 'px';		
   }
  
   function showMensesChartDetail(){
	    var customerDateStr = localStorage.getItem("customerDateKey");
	    var customerDateArray = getCustomerDateArray(customerDateStr);
   		var latestValidDateStr = getLatestValidBBTDateStr(customerDateArray.toString());
   		
   		if(latestValidDateStr == "-")
   			latestValidDateStr = getCurrentDateStr();
   			
   		var latestValidPeriodStr = customerDatePeriodMap.get(latestValidDateStr);
	    showMensesChartDetailForEach(latestValidDateStr, latestValidPeriodStr);	
   }
   
   function showMensesChartDetailForEach(detailXAxisDayStr, periodStr){   
   		showPeriodDayNum(detailXAxisDayStr);
   		showPeriodDayDetail(detailXAxisDayStr);
   		showPeriodDayTitleDetail(periodStr);	    
   }   
   
   function showPeriodDayNum(detailXAxisDayStr){
   		document.getElementById('periodDayNum').innerHTML = getDaysFromPreviousYjqStartDate(detailXAxisDayStr);   		
   }
   
   
  
   function showPeriodDayDetail(detailXAxisDayStr){
   		showPeriodDayStateDetail(detailXAxisDayStr);
   		document.getElementById('detailMenses').innerHTML = "经期开始";
	    document.getElementById('detailDate').innerHTML = getDetailDate(detailXAxisDayStr);
	    document.getElementById('detailDayOfWeek').innerHTML = getDetailDayOfWeek(detailXAxisDayStr);
   }
   
   function showPeriodDayTitleDetail(periodStr){
   		document.getElementById('periodDayTitle').src = setPeriodImageSrc(periodStr);
   }
   